<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div class="main">
      <div class="import-box">
        <div class="input">
          <input
            type="password"
            name="server"
            placehoder-class="c-green"
            :placeholder="placeholder[1]"
            v-model="server"
          />
          <button @click="importCandidate()">+</button>
        </div>
        <div class="input">
          <input
            type="number"
            name="dynamic_id"
            placehoder-class="c-green"
            :placeholder="placeholder[0]"
            v-model="dynamic_id"
          />
          <button @click="importCandidate()">+</button>
        </div>
        <div class="candidate">
          <user-card v-for="item in candidate" :key="item.uid" :user="item" />
        </div>
        <div class="controller">
          <button @click="clear()">清空全部</button>
          <button @click="roll()">滚动</button>
          <button @click="stop()">停止</button>
        </div>
        <div class="choosed">
          <div
            class="img"
            :style="`background-image: url('${choosedUser.face}')`"
          />
          <div class="uid">UID : {{ choosedUser.uid }}</div>
          <div class="uname">{{ choosedUser.uname }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { set } from "node_modules/vue/types/umd";
import { Component, Vue } from "vue-property-decorator";
import UserCard from "./components/UserCard.vue";
import { d_user } from "./interfaces";
let face = "https://i02piccdn.sogoucdn.com/fcfebe7d37ce460a",
  uid = 1;
const defaultUser = { uname: "神秘用户", face, uid };

let timer: number;

@Component({
  components: {
    ["user-card"]: UserCard,
  },
})
export default class App extends Vue {
  placeholder: string[] = ["转发抽奖动态ID", "请输入神秘代码"];
  dynamic_id: number | null = null;
  server: string = "";
  offset: number = -1;
  timer?: number;
  register: any = {};
  get choosedUser(): d_user {
    return this.candidate[this.offset] || defaultUser;
  }
  candidate: d_user[] = [];
  async importCandidate() {
    let items = await this.getCandidate(this.dynamic_id + "");
    items.map((v) =>
      this.register[v.uid]
        ? null
        : [(this.register[v.uid] = true), this.candidate.push(v)]
    );
    this.candidate = this.candidate.concat();
    this.dynamic_id = null;
  }
  async getCandidate(id: string, next: string = ""): Promise<d_user[]> {
    let url = this.server.trim() + "/dynamic_repost";
    let avatarJumper = this.server.trim() + "/bilibili-avatar";
    let res = await (
      await fetch(
        next ? url + "?id=" + id + "&offset=" + next : url + "?id=" + id,
        { method: "GET", mode: "cors" }
      )
    ).json();
    let items = res.items;
    if (res.has_more) items.concat(await this.getCandidate(id, res.offset));
    return items.map(
      (v: d_user) => ((v.face = avatarJumper + "?u=" + v.face), v)
    );
  }
  clear() {
    this.candidate = [];
    this.register = {};
    this.offset = -1;
  }
  roll() {
    if (timer) return;
    timer = setInterval(
      () => (this.offset = Math.floor(this.candidate.length * Math.random())),
      50
    );
  }
  stop() {
    setTimeout(() => {
      clearInterval(timer);
      timer = 0;
    }, 1000);
  }
}
</script> 
<style lang="less" >
.main {
  font-size: 24px;
  display: flex;
  flex-direction: column;
  .import-box {
    display: flex;
    flex-direction: column;
    .input {
      width: 450px;
      flex-direction: row;
      margin: 0.5em auto;
      display: flex;
    }
    .candidate {
      display: flex;
      flex-direction: row;
      background-color: #ffffff;
      padding: 0.3em;
      box-sizing: border-box;
      margin: 0.5em auto;
      color: #3fa87e;
      border-radius: 3px;
      border: 1px solid #3fa97e;
      width: 450px;
      flex-wrap: wrap;
      height: 7em;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        width: 0 !important;
      }
    }
    .controller {
      button {
        margin: 0.1em 0.3em;
        font-size: 0.7em;
        height: calc(1em / 0.5);
        line-height: calc(1em / 0.5);
        border-radius: 10px;
        padding: 0 0.6em;
      }
    }
    .choosed {
      margin-top: 1em;
      .img {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        margin: 0 auto;
        background-size: cover;
        background-position: 50% 50%;
      }
      .uid {
        font-size: 0.75em;
      }
      .uname {
      }
    }
  }
}
input {
  &::-webkit-input-placeholder {
    color: #3fa87e;
  }
  all: unset;
  flex: 1;
  box-sizing: border-box;
  border-color: #3fa87e;
  box-shadow: none;
  color: #3fa87e;
  border: 1px solid;
  font-size: inherit;
}
button {
  font-size: inherit;
  background-color: #3fa87e;
  border: none;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
}
.c-green {
  color: #3fa87e;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  font-size: 3em;
}
</style>
